<template>
  <div class="remake">
    <div class="remake-header">
      <div class="remake-left">
        <h3 >5</h3>
        <p>综合评分</p>
        <p>高于周边商家99%</p>
      </div>
      <div class="remake-right">
        <span>服务态度</span>
        <van-rate
          v-model="value"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
          readonly
        />
        <div>
          <span>店铺评分</span>
          <van-rate
            v-model="value_store"
            :size="25"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            readonly
          />
        </div>
        <p>送达时间：<span>20分钟</span></p>
      </div>
    </div>

    <!-- 评论区 -->
    <div class="remake-main">
      <van-tabs type="card">
        <van-tab title="全部评论" >
          <div class="card-main" v-for="item in ratings" :key="item.i">
            <!-- 头像 -->
            <div>
              <van-image
                round
                width="4rem"
                height="4rem"
                :src="item.avatar"
              />
            </div>
            <div>
              <van-col span="9" offset="1">
                <p>{{item.username}}</p>
              </van-col>
              <van-col span="14">
                <p>{{item.rateTime}}</p>
              </van-col>
              <van-col offset="1">
                <van-rate v-model="item.score" /><span>3分钟送达</span>
              </van-col>
              <van-col span="24" offset="1">
                <p>{{item.text}}</p>
              </van-col>
              <van-col offset="1">
              <van-tag plain type="primary" size="medium" color="#bdbdbd" v-for="menu in item.recommend" :key="menu.i">{{menu}}</van-tag>     
              </van-col>
            </div>
          </div>
        </van-tab>
        <van-tab title="好评">
          <div class="card-main" v-for="item in goodrat" :key="item.i">
            <!-- 头像 -->
            <div>
              <van-image
                round
                width="4rem"
                height="4rem"
                :src="item.avatar"
              />
            </div>
            <div>
              <van-col span="9" offset="1">
                <p>{{item.username}}</p>
              </van-col>
              <van-col span="14">
                <p>{{item.rateTime}}</p>
              </van-col>
              <van-col offset="1">
                <van-rate v-model="item.score" /><span>3分钟送达</span>
              </van-col>
              <van-col span="24" offset="1">
                <p>{{item.text}}</p>
              </van-col>
              <van-col offset="1">
              <van-tag plain type="primary" size="medium" color="#bdbdbd" v-for="menu in item.recommend" :key="menu.i">{{menu}}</van-tag>     
              </van-col>
            </div>
          </div>
        </van-tab>
        <van-tab title="差评">
          <div class="card-main" v-for="item in bads" :key="item.i">
            <!-- 头像 -->
            <div>
              <van-image
                round
                width="4rem"
                height="4rem"
                :src="item.avatar"
              />
            </div>
            <div>
              <van-col span="9" offset="1">
                <p>{{item.username}}</p>
              </van-col>
              <van-col span="14">
                <p>{{item.rateTime}}</p>
              </van-col>
              <van-col offset="1">
                <van-rate v-model="item.score" /><span>3分钟送达</span>
              </van-col>
              <van-col span="24" offset="1">
                <p>{{item.text}}</p>
              </van-col>
              <van-col offset="1">
              <van-tag plain type="primary" size="medium" color="#bdbdbd" v-for="menu in item.recommend" :key="menu.i">{{menu}}</van-tag>     
              </van-col>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import {$_ratings} from '@/api/order'
// import {forMatTime} from '@/utils/tools'
@Component
export default class extends Vue {
    value: number = 4;
    value_store: number = 5;
    ratings:Array<unknown>=[];
    // 差评
    bads:Array<unknown>=[];
    // 好评
    goodrat:Array<unknown>=[];

    created():void{
        $_ratings().then(res=>{
            console.log(res)
            // 时间转
            // for(const times of res.data.data){
            //   forMatTime(times.rateTime)
            //  console.log(times.rateTime);          
            // }
            this.ratings=res.data.data
            for(const item of res.data.data){
              if(item.score>=4){
                this.goodrat.push(item)
              }else{
                this.bads.push(item)
              }
            }    
            console.log('bad',this.bads,222,this.goodrat)     
        })
    }
   
}
</script>

<style scoped lang="scss">
//辅色
$bgcolor_ex: #fff;
.remake {
  height: 100vh;
  background: #f4f5f7;

  .remake-header {
    display: flex;
    padding: 20px 10px;
    background: $bgcolor_ex;
    justify-content: space-between;
    .remake-left {
      text-align: center;
      padding-right: 10px;
      border-right: 1px solid #000;
    }
  }

  .remake-main {
    width: 98%;
    padding: 0 6px;
    margin: 0 auto;
    height: 100%;
    margin-top: 10px;
    background: $bgcolor_ex;

    .card-main {
      margin-top: 10px;
      padding: 0 10px;
      display: flex;
      van-tag{
          margin: 0 5px;
      }
    }
    
  }
}
</style>